<template>
  <div class="kgh-container">
    <div class="layout" v-show="qrShow" @click="qrShow=false">
      <div class="layout-content qrcode">
        <p>扫码分享到微信：</p>
        <canvas id="canvas"></canvas>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row section-header">
          <h4>
            <router-link to="/expert">
              <i class="glyphicon glyphicon-chevron-left"></i> 专家资料
            </router-link>
          </h4>
        </div>
        <div class="row">
          <div class="info-card" v-if="techInfo">
            <div class="col-sm-4 col-xs-12">
              <div class="card-left">
                <img :src="'https://kegonghui.oss-cn-beijing.aliyuncs.com/'+techInfo.headimg+'?x-oss-process=image/circle,r_100'" alt="..." width="175" height="175" class="img-circle" style="margin-top:75px">
                <p class="user-name">{{techInfo.name}}</p>
                <div class="btn-box">
                  <a href="javascript:;" v-if="!techInfo.collection" class="btn-ghost" @click="handleAddCollection()">关注</a>
                  <a href="javascript:;" class="btn-ghost" @click="handleQrcode()">分享</a>
                </div>
              </div>
            </div>
            <div class="col-sm-8 col-xs-12">
              <div class="card-right">
                <div class="card-details clearfix">
                  <div class="card-item pull-left">
                    <h4>工作年限</h4>
                    <h3>{{techInfo.workYear}}年</h3>
                  </div>
                  <div class="card-item pull-left">
                    <h4>职称</h4>
                    <h3>{{techInfo.title}}</h3>
                  </div>
                  <div class="card-item pull-left">
                    <h4>行业</h4>
                    <h3>{{techInfo.post}}</h3>
                  </div>
                </div>
                <p class="card-desc">{{techInfo.desc}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section sec-mrb">
      <div class="container">
        <div class="row section-header">
          <h3>课程
            <a href="javascript:;" class="pull-right" @click="handleToMore(1)">
              <small class="color-bbb">更多</small>
            </a>
          </h3>
        </div>
        <!-- <div class="row section-header clearfix">
                    <ul class="nav nav-pills pull-left">
                        <li role="presentation" style="margin-right: 40px">
                            <h4>
                                <a href="#" class="text-black">课程</a>
                            </h4>
                        </li>
                        <li role="presentation">
                            <h4>
                                <a href="#" class="text-black">资源</a>    
                            </h4>
                        </li>
                    </ul>
                </div> -->
        <div class="row">
          <div class="col-xs-12 col-sm-3" v-for="item in curriculumList" :key="item.id">
            <Course-item :item="item"></Course-item>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row section-header">
          <h3>资源
            <a href="javascript:;" class="pull-right" @click="handleToMore(2)">
              <small class="color-bbb">更多</small>
            </a>
          </h3>
        </div>
        <table class="table">
          <tr v-for="item in fileList" :key="item.id">
            <td>{{item.fileName}}</td>
            <td>{{timestampToTime(item.createTime)}}</td>
            <td>{{item.userName}}</td>
            <td class="color-b8">{{dealFileLength(item.fileLength)}}</td>
            <td width="200">
              <a href="javascript:;" class="text-primary" @click="handleDownload(item.id)">点击下载</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import util from "@/assets/js/utils.js";
// @ is an alias to /src
import CourseItem from "@/components/Course-Item.vue";
import QRCode from 'qrcode'
export default {
  name: "course",
  data () {
    return {
      uid: "",
      techInfo: null,
      curriculumList: [],
      fileList: [],
      qrShow: false
    };
  },
  components: {
    CourseItem
  },
  created () {
    this.uid = this.$route.params.uid;
    this.fetchTechInfo();
    this.fetchCurriculumList();
    this.fetchFileList();
  },
  methods: {
    fetchTechInfo () {
      let that = this;
      axios
        .post(
          "/my/getTechnicians",
          qs.stringify({
            id: that.uid
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            that.techInfo = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    fetchCurriculumList () {
      let that = this;
      axios
        .post(
          "/curriculum/list",
          qs.stringify({
            ctype: "",
            category: "",
            hot: '',
            name: "",
            from: "",
            userId: that.uid
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            that.curriculumList = response.data.data.slice(0, 4);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    fetchFileList () {
      //资源
      let that = this;
      axios
        .post(
          "/curriculum/shareFileList",
          qs.stringify({
            userId: that.uid
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            that.fileList = that.fileList.concat(response.data.data);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    fetchMoreData () {
      // 加载更多
    },
    handleToMore (type) {
      this.$router.push("/more/" + this.uid + "/" + type);
    },
    handleToMyInto () {
      window.open("/#/my/myInto");
    },
    handleDownload (id) {
      let that = this;
      axios
        .post(
          "/curriculum/downloadShare",
          qs.stringify({
            id: id
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            window.open(response.data.data);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    timestampToTime (time) {
      return util.timestampToTime(time)
    },
    dealFileLength (num) {
      if (num > 1048576) {
        return (num / 1048576).toFixed(1) + "G";
      } else {
        return Math.ceil(num / 1024) + "M";
      }
    },
    handleQrcode () {
      //分享，动态生成二维码，可以添加变量
      this.qrShow = true
      let queryDetail = window.location.href
      var canvas = document.getElementById('canvas')
      QRCode.toCanvas(canvas, queryDetail, function (error) {
        if (error) console.error(error)
        console.log('success!')
      })
    },
    handleAddCollection () {
      // 添加关注
      let that = this
      axios
        .post(
          '/curriculum/addCollection',
          qs.stringify({
            id: this.uid,
            type: 2
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            alert('关注成功')
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
};
</script>

<style lang="scss" scoped>
.info-card {
  .user-name {
    font-size: 24px;
    margin: 20px 0 40px 0;
  }
  .btn-ghost {
    margin: 0px 20px;
  }

  .card-details {
    margin: 30px auto 60px;
    .card-item {
      width: 33%;
      text-align: center;
      h4 {
        font-weight: normal;
        color: #b8b8b8;
        font-size: 22px;
      }
      h3 {
        font-weight: normal;
        color: #212121;
        font-size: 24px;
      }
    }
  }
  .card-table {
    margin-top: 70px;
    margin-bottom: 30px;
    th {
    }
    td {
      text-align: center;

      padding: 30px 0 40px;
      .table-link {
        font-size: 24px;
        color: #0092dc;
        text-align: right;
      }
    }
  }
  .card-desc {
    // font-size: 14px;
    color: #b8b8b8;
  }
}
</style>